﻿<div>
    <AntSwitch Checked="theme == MenuTheme.Dark" OnChange=changeTheme CheckedChildren=@("Dark") UnCheckedChildren=@("Light") />
    <br />
    <br />
    <Menu Theme=theme
          OnMenuItemClicked=handleClick
          Style=" width: 256px "
          DefaultOpenKeys=@(new []{"sub1"})
          SelectedKeys=@(new []{current})
          Mode="MenuMode.Inline">
        <SubMenu Key="sub1" Title=sub1Title>
            <MenuItem Key="1">Option 1</MenuItem>
            <MenuItem Key="2">Option 2</MenuItem>
            <MenuItem Key="3">Option 3</MenuItem>
            <MenuItem Key="4">Option 4</MenuItem>
        </SubMenu>
        <SubMenu Key="sub2" Title=sub2Title>
            <MenuItem Key="5">Option 5</MenuItem>
            <MenuItem Key="6">Option 6</MenuItem>
            <SubMenu Key="sub3" Title="@("Submenu")">
                <MenuItem Key="7">Option 7</MenuItem>
                <MenuItem Key="8">Option 8</MenuItem>
            </SubMenu>
        </SubMenu>
        <SubMenu Key="sub4" Title=sub4Title>
            <MenuItem Key="9">Option 9</MenuItem>
            <MenuItem Key="10">Option 10</MenuItem>
            <MenuItem Key="11">Option 11</MenuItem>
            <MenuItem Key="12">Option 12</MenuItem>
        </SubMenu>
    </Menu>
</div>

@code {

    RenderFragment sub1Title =
        @<span>
            <AntIcon Type="mail" Theme="outline"></AntIcon>
            <span>Navigation One</span>
        </span>;

    RenderFragment sub2Title =
        @<span>
            <AntIcon Type="appstore" Theme="outline"></AntIcon>
            <span>Navigation Two</span>
        </span>;

    RenderFragment sub4Title =
        @<span>
            <AntIcon Type="setting" Theme="outline"></AntIcon>
            <span>Navigation Three</span>
        </span>;

    MenuTheme theme = MenuTheme.Dark;
    string current = "1";

    void changeTheme(bool value)
    {
        this.theme = value ? MenuTheme.Dark : MenuTheme.Light;
    }

    void handleClick(MenuItem e)
    {
        current = e.Key;
    }

}
